<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    :title="title"
    :show-icon="false"
    class="w-800px"
  >
    <!-- 创建和编辑区域 -->
    <mycard v-if="editType === 'add' || editType === 'edit'" class="p-2">
      <flexform
        ref="flexFormref"
        :formList="formList"
        :formValue="formValue"
      >
      </flexform>
    </mycard>
    <!-- 回显区域 -->
    <mycard v-if="editType === 'view'"> 查看 </mycard>

    <!-- 交互成功区域 -->
    <mycard v-if="editType === 'success'">
      <n-result status="success" title="成功" :description="resultText">
      </n-result>
    </mycard>
    <!-- 交互失败区域 -->
    <mycard v-if="editType === 'error'">
      <n-result status="error" title="错误" :description="resultText">
      </n-result>
    </mycard>
    <template #action>
      <div class="w-full flex justify-end items-center">
        <n-button class="mx-1" v-if="editType === 'error'" @click="getreturn"
        >返回</n-button
        >
        <n-button class="mx-1" @click="handleClose">关闭</n-button>
        <n-button
          class="mx-1"
          v-if="editType === 'add' || editType === 'edit'"
          type="primary"
          @click="handleSave"
        >确定</n-button
        >
      </div>
    </template>
  </n-modal>
</template>


<script setup name="userinfoMdel" lang="ts">
import { FormItemRule } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { openAndClose } from '../../../hooks/useEdit'
import guiling from '../../../util/guiling'
import {ref, watch,} from "vue"
const router = useRouter()
const route = useRoute()
const flexFormref = ref<any>(null) // 表单组件
const formValue = ref<any>({}) // 表单数据
// 自定义重置组件的方法
const reset = () => {
  formValue.value = guiling(formValue.value)
}
// 自定义初始化需要执行的方法
const chushihua = (data: any=null) => {
  if (data) {
    formValue.value = data
  }
  console.log(formValue.value,"显示是什么状态")
}
const emit=defineEmits(["close"])
// 从钩子中结构出需要的函数和属性
const {
  showModal,
  editType,
  resultText,
  init,
  handleClose,
  getsuccess,
  getfaild,
  title,http,
} = openAndClose(chushihua, reset,"",emit)

// 数字校验
const checknum=(rule: FormItemRule,value: string)=>{
  const regx = /^[1-9]\d*$/
  if(!value){
    return true
  }else if(value.length > 10){
    return new Error('请输入长度10位以内正整数')
  }else if(!regx.test(value)){
    return new Error('请输入长度10位以内正整数')
  }else{
    return true
  }
}

// 表单配置
const formList = ref([
  {
    label: '用户姓名',
    key: 'xingming',
    type: 'input',
    rules: [
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '民族',
    key: 'minzu',
    type: 'select',
    rules: [
    ],
    options: [],
  },
  {
    label: '籍贯',
    key: 'jiguan',
    type: 'input',
    rules: [
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '出生地',
    key: 'chushengdi',
    type: 'input',
    rules: [
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '政治面貌',
    key: 'zhengzhimianmao',
    type: 'select',
    rules: [
    ],
    options: [],
  },
  {
    label: '身高',
    key: 'shengao',
    type: 'input',
    suffix:"cm",
    rules: [
     {validator:checknum,trigger: ['input', 'change', 'blur'],}
    ],
  },
  {
    label: '体重',
    key: 'tizhong',
    type: 'input',
    suffix:"kg",
    rules: [
      {validator:checknum,trigger: ['input', 'change', 'blur'],}
    ],
  },
  {
    label: '参加工作时间',
    key: 'worktime',
    type: 'picker',
    rules: [
    ],
  },
  {
    label: '最高学历',
    key: 'xueli',
    type: 'select',
    rules: [
    ],
    options: [],
  },
  {
    label: '身份证号',
    key: 'shenfenzheng',
    type: 'input',
    rules: [

    ],
  },
  {
    label: '联系地址',
    key: 'chushengdizhi',
    type: 'input',
    rules: [

      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '所在地区',
    key: 'xianzaidizhi',
    type: 'input',
    rules: [

      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '出生日期',
    key: 'chushengriqi',
    type: 'picker',
    rules: [
    ],
  },
])
const adddisabled = ref([])
const editdisabled = ref(["parent"])
watch(editType,()=>{
  if(editType.value==="add"){
    formList.value.forEach((item:any)=>{
      if(adddisabled.value.includes(item.key as never)){
        item.disabled = true
      }else{
        item.disabled = false
      }
    })
  }else if(editType.value==="edit"){
    formList.value.forEach((item:any)=>{
      if(editdisabled.value.includes(item.key as never)){
        item.disabled = true
      }else{
        item.disabled = false
      }
    })
  }
})

// 点击确定
const handleSave = () => {
  console.log(formValue.value.id,"id是否存在")
  if (formValue.value.id) {
    flexFormref.value && flexFormref.value.jiaoyan(updatefunc)
  } else {
    flexFormref.value && flexFormref.value.jiaoyan(createfunc)
  }
}

const createfunc = (data: any) => {
  getsuccess('创建成功')
}

const updatefunc = (data: any) => {
  http.putuserinfo(data).then(res=>{
    if(res.data.code===0){
      getsuccess("修改成功")
    }else{
      getfaild(res.data.error || res.data.msg || "修改失败")
    }
  })
  getfaild('修改失败')
}

// 点击返回
const getreturn = () => {
  if (formValue.value.id) {
    editType.value = 'edit'
  } else {
    editType.value = 'add'
  }
  resultText.value = ''
}

// 抛出属性和方法
defineExpose({ init, handleClose })
</script>

<style scoped>
</style>
